import React, { useState } from 'react';
import { Form, Button, Row, Col } from 'react-bootstrap';

const TodoForm = ({ onAddTodo }) => {
  const [name, setName] = useState('');
  const [category, setCategory] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (!name.trim()) {
      return;
    }
    
    onAddTodo({
      name,
      category: category || '默认',
      complete: false
    });
    
    // 重置表单
    setName('');
    setCategory('');
  };

  return (
    <div>
      <h4 className="mb-3">添加新任务</h4>
      <Form onSubmit={handleSubmit}>
        <Row className="mb-3">
          <Col md={6}>
            <Form.Group controlId="todoName">
              <Form.Label>任务名称</Form.Label>
              <Form.Control
                type="text"
                placeholder="输入任务名称"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
              />
            </Form.Group>
          </Col>
          <Col md={6}>
            <Form.Group controlId="todoCategory">
              <Form.Label>任务分类</Form.Label>
              <Form.Control
                type="text"
                placeholder="输入任务分类"
                value={category}
                onChange={(e) => setCategory(e.target.value)}
              />
            </Form.Group>
          </Col>
        </Row>
        <Button variant="success" type="submit" style={{backgroundColor: '#2e7d32', borderColor: '#2e7d32'}}>
          添加任务
        </Button>
      </Form>
    </div>
  );
};

export default TodoForm; 